<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/common.css" media="all">
    <link rel="stylesheet" href="../viewstyle/css/publicform.css">
    <script src="/js/layui/layui.all.js"></script>
    <script src="../viewstyle/config/config2.js"></script>
    <script src="/admin/js/token.js"></script>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">

                <div class="layui-inline">
                    <label class="layui-form-label">区域</label>
                    <div class="layui-input-inline">
                        <select name="city" lay-verify="required" id="area" lay-filter="region">
                            <option value="">选择区域</option>
                        </select>
                    </div>
                </div>


                <div class="layui-inline">
                    <div class="layui-form">
                        <div class="layui-form-item">
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="begin" placeholder="开始时间">
                            </div>
                            <div class="layui-form-mid">
                                -
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="end" placeholder="结束时间">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-inline">
                    <input type="text" id="stationid" placeholder="站点的编号或名称" autocomplete="off" class="layui-input">
                </div>

                <div class="layui-inline">
                    <button id="btnsearch" class="layui-btn ">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索
                    </button>
                </div>
            </div>
        </div>


        <div class="layui-card-body">
            <table id="station" class="layui-hide" lay-filter="t"></table>
        </div>

    </div>
</div>
</body>

<!--<script type="text/html" id="tb">
    <div class="layui-container">

    </div>
</script>-->

<script type="text/html" id="delAndEdit">
    <a class="layui-btn layui-btn-xs" lay-href="station/SelectAllKey.html" id="edit" lay-event="key">查看密钥</a>
</script>
<script>
        var $ = layui.$;
        var laydate = layui.laydate;
        var form = layui.form;
        var table = layui.table;
        var token=layui.data("local_store").token;
        // 执行一个laydate实例
        laydate.render({
            elem: '#begin', //指定元素
            type: 'datetime'
        });
        laydate.render({
            elem: '#end', //指定元素
            type: 'datetime'
        });
        table.render({
            elem: "#station",
            url: "/admin/station/selectAllStation?token="+token,
            id: "t",
            toolbar: "#tol",
            cols: [[{
                title: "站点编号",
                field: "station_bh",
                width: "9%",
                fixed: "left",
                align: "center"
            }
                , {
                    title: "站点名称",
                    field: "station_name",
                    width: "8%",
                    align: "center"
                }
                , {
                    title: "区域",
                    field: "station_quyu",
                    width: "8%",
                    align: "center"
                }
                , {
                    title: "类型",
                    field: "station_type_name",
                    width: "6%",
                    align: "center"
                }
                , {
                    title: "模式",
                    field: "station_model",
                    width: "6%",
                    align: "center"
                }
                , {
                    title: "最大终端数",
                    field: "station_maximum_number_of_terminals",
                    width: "9%",
                    align: "center"
                }
                , {
                    title: "已绑定终端数",
                    field: "staion_current_number_o_terminals",
                    width: "11%",
                    align: "center"
                }
                , {
                    title: "联系电话",
                    field: "station_phone",
                    width: "9%",
                    align: "center"
                }
                , {
                    title: "密码",
                    field: "station_password",
                    width: "7%",
                    align: "center"
                }
                , {
                    title: "创建时间",
                    field: "station_create_time",
                    width: "11%",
                    align: "center"
                }
                , {
                    title: "所属用户",
                    field: "admin_name",
                    width: "10%",
                    align: "center"
                }
                , {
                    title: "操作",
                    align: "center",
                    toolbar: "#delAndEdit",
                    fixed: "right"
                }
                , {
                    title: "id",
                    field: "station_id",
                    hide: true
                }
            ]],
            page: true,
            limit:40
        })
        //    右侧按钮的的监听事件
        table.on("tool(t)", function (obj) {
            var getdata = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            switch (layEvent) {
                case "key":
                    layui.data("stationbh", {
                        key: 'getdata',
                        value: getdata
                    });
                    localStorage.setItem("num", 0)
                    break;
            }
        });
        //搜索的监听时间
        $('#btnsearch').click(function () {
            table.reload('t', {
                where: {
                    station_area: $("#area").val(),
                    station_create_time: $("#begin").val(),
                    station_end_time: $("#end").val(),
                    station_name: $("#stationid").val()
                },
                page: {
                    curr: 1
                }
            })
        })

        //键盘回车监听
        $(window).keypress(function (event) {
            if (event.which === 13) {
                $('#btnsearch').click();
            }
        })
        //    区域下拉列表的监听事件
        $.ajax({
            url: '/admin/region/SelectregionAll',
            type: "get",
            success: function (res) {
                if (res.code == 200) {
                    for (var i = 0; i < res.data.length; i++) {
                        $('#area').append(new Option(res.data[i].regionName, res.data[i].regionId));
                    }
                    layui.form.render("select");
                }
            }
        })
</script>
</html>
